<template>
  <div class="infoCard">
    <div class="tit">
      {{ tit }}
      <span :class="`col${statusNum}`">{{ status }}</span>
    </div>
    <div class="item-box">
      <div v-for="item in arr" :key="item.name" class="item">
        <div>{{ item.name }}：</div>
        <div :class="(statusNum === 3 || statusNum === 4) && item.name === '失败原因' ? 'colff7' : ''">{{ item.val }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCalculateBatchDetails, calculateBatchesGet } from "./api";
import { calculateTaxStatus } from "../dataStatic";
export default {
  created() {
    // this.tit = this.$route.query.name;

    this.calculateBatchesGetFun();
  },
  data() {
    return {
      statusNum: 1,
      status: "",
      tit: "",
      type: "",
      arr: [
        { name: "所属税期", val: "" },
        { name: "总收入", val: "" },
        { name: "应缴税款总额", val: "" },
        { name: "算税人数", val: "" },
        { name: "三险一金总额", val: "" }
      ]
    };
  },
  methods: {
    async calculateBatchesGetFun() {
      try {
        const { data } = await calculateBatchesGet(this.$route.query.id);
        this.status = this.statusFun(data.status);
        this.statusNum = data.status;
        this.tit = data.name;
        this.onGetTransferAccountsBatches();
      } catch (error) {
        console.log("error log --> ", error);
      }
    },
    statusFun(status) {
      return calculateTaxStatus[status - 1].label;
    },
    async onGetTransferAccountsBatches() {
      try {
        const id = this.$route.query.id;
        const { data } = await getCalculateBatchDetails({ batchId: id });
        this.arr[0].val = data.period.slice(0, 4) + "-" + data.period.slice(4);
        this.arr[1].val = data.totalIncome === 0 ? 0 : `￥${data.totalIncome.toLocaleString()}`;
        this.arr[2].val = data.totalTax === 0 ? 0 : `￥${data.totalTax.toLocaleString()}`;
        this.arr[3].val = data.peopleCount;
        this.arr[4].val = data.totalInsurance === 0 ? 0 : `￥${data.totalInsurance.toLocaleString()}`;
        if (this.statusNum === 3) {
          this.arr.push({ name: "失败原因", val: data.reason });
        }
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    getInfo() {
      return {
        batchId: this.$route.query.id,
        batchType: this.type
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.infoCard {
  width: 100%;
  height: 194px;
  background: #ffffff;
  border-radius: 4px;

  padding: 24px;
  .colff7 {
    color: #ff7085;
  }
  .tit {
    font-size: 18px;
    font-weight: 500;
    color: #3c3d43;
    margin-bottom: 24px;
    img {
      width: 18px;
      height: 18px;
      vertical-align: middle;
    }
    span {
      display: inline-block;
      padding: 4px 8px;
      // background: rgba(70, 134, 255, 0.12);
      border-radius: 2px;
      font-size: 10px;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      // color: #386fd7;
    }
    .col1 {
      background: rgba(0, 0, 0, 0.04);
      border-radius: 2px;
      border: 1px solid rgba(0, 0, 0, 0.15);
      color: #55565d;
      font-size: 12px;
    }
    .col2 {
      background: rgba(255, 200, 0, 0.12);
      border-radius: 2px;
      color: #f79300;
      font-size: 12px;
    }
    .col3 {
      background: rgba(255, 112, 133, 0.12);
      border-radius: 2px;
      color: #fe5770;
      font-size: 12px;
    }
    .col4 {
      background: rgba(255, 112, 133, 0.12);
      border-radius: 2px;
      color: #fe5770;
      font-size: 12px;
    }
    .col5 {
      background: rgba(50, 204, 170, 0.12);
      border-radius: 2px;
      color: #11ae8b;
      font-size: 12px;
    }
  }
  .item-box {
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 33%;
      height: 32px;
      font-weight: 400;
      color: #55565d;
      margin-bottom: 24px;
      div:nth-child(1) {
        color: #a6a8b4;
      }
    }
  }
}
</style>
